Weight 500 is the ceiling. Numerals in tables and money use tabular-nums. Headings get text-wrap: balance, body copy text-wrap: pretty. Page titles are fluid: clamp(28px, 4.2vw, 44px).
Components
BUTTONS
Accent: the one commit action on a screen. Solid: monochrome primary. Secondary: border only. Ghost: text. Radius 3, no shadows. Press to .97 in 160ms, release on the spring.
INPUTS
Disabled
Rest: bd-input on subtle. Focus: border t1 on surface. Radius 3, padding 12/14.
STATUS VARIANTS
{{ sv.chip }}
{{ sv.name }}
Default: glass pill.
PILLS & BADGE
NeutralEmphasisLive
Count badge
TOGGLE
{{ td.name }}
42×24 track, 18px knob, radius 3.
NAV ROW
Active: fill1 background, 3px left bar, text to t1 and weight 500. In the rail one highlight slides between rows on the spring.
TAB INDICATOR
{{ tb.label }}
Underline bar moves on --spring.
DROPDOWN
Trigger is the input; its caret turns while open. Menu is bd-active edged, offset 5px, no shadow, checkmark on the current value. It shrinks back when it closes.
LIST ROW
{{ li.mark }}
{{ li.name }}
{{ li.meta }}
{{ li.pill }}
12px vertical padding, 1px fill3 divider, none on the last row. Selected row takes fill1 and loses its divider. Only the background animates.
CHECKBOX & RADIO
{{ cd.label }}
{{ rd.label }}
Checkbox 16px radius 3. Radio is the only round control besides avatars and dots.
POPUP
Tooltip, 13px, t1 fill, 8px offset
Dialog: 440px on the --scrim, pops from .96 with blur on --spring and shrinks away on --ease-in. Escape and the scrim both close it. Toast bottom-centre, 3s, then slides out.